<template>
     <div id="app">
        <div class="shop-header" style="display: flex; align-items: center; margin-top: 20px;">
            <h3>我的购物车</h3>
            <div class="shop-header-right" style="margin-left: 20px;">
                <div class="shop-header-right-item">
                    <span>共{{ list.length }}件商品</span>
                </div>
            </div>
        </div>
        <table>
        <thead>
            <tr>
            <th>
                <div class="select-all" style="text-align: left;">
                    <label>
                        <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
                    </label>
                </div>
            </th>
            <th>课程名称</th>
            <th>原价</th>
            <th>优惠</th>
            <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 如果list没有数据展示暂无数据 -->
             <tr v-if="list.length === 0">
                <td colspan="5" style="text-align: center; height: 100px;">暂无数据</td>
            </tr>
            <tr v-for="item in list" :key="item.id">
               
                  <td><input type="checkbox" v-model="selected" :value="item"></td>
                  <td class="course-name">
                      <img :src="item.img" alt="">
                      {{ item.name }}
                  </td>
                  <td>
                      <span class="price">￥{{ item.price }}</span>
                      <span v-if="item.originalPrice" class="original-price">￥{{ item.originalPrice }}</span>
                  </td>
                  <td v-if="item.discount === '限时钜惠'">
                    <div style="background-color: rgb(255, 85, 0);margin-left: 65px;width: 55px;height: 20px; color: #fff; font-size: 12px;" >
                      <span>{{ item.discount }}</span>
                    </div>
                  </td>
                  <td v-else>
                    <div style="background-color: rgb(16, 142, 233);margin-left: 70px;width: 45px;height: 20px; color: #fff; font-size: 12px;">
                      <span>原价</span>
                    </div>
                  </td>
                  <td>
                      <div @click="removeItem(item)">
                        <img src="@/assets/icon/删除.png" alt="" style="width: 13px;">
                      </div>
                  </td>
               
            </tr>
        </tbody>
        </table>

        <div style="margin-top: 20px;     background-color: #eee;" class="total-price">
          <div class="select-all" style="margin-right: 850px;">
                    <label>
                        <input type="checkbox" v-model="selectAll" @change="toggleAll"> 全选
                    </label>
                </div>
          <div style="margin-right: 20px; width: 150px;">
            <span>合计：</span>
            <span style="color: #e60012; font-size: 18px; " >￥{{ totalPrice.toFixed(2) }}</span>
          </div>
          <button class="submit-btn" :disabled="selected.length === 0" @click="submitOrder">提交</button>
        </div>
     </div>
</template>
<script>
export default {
    data() {
        return {
          list: [
            { id: 1, name: '宇哥带你学Java之消息队列MQ', price: 2999, originalPrice: 2999, discount: '原价',img:'https://oos-hazz.ctyunapi.cn/online-course/MQ%E6%B6%88%E6%81%AF%E9%98%9F%E5%88%97-1699063416561336320.jpg'},
            { id: 2, name: 'Python实现接口自动化测试', price: 99.9, originalPrice: 299, discount: '限时钜惠',img:'https://oos-hazz.ctyunapi.cn/online-course/lQLPJw-5RYZcElTMyM0BSrAeZ3aicl1m4AOnon0oQP8A_330_200-1608044920902254592.png'},
            { id: 3, name: '前端构建工具 Webpack教程', price: 199, originalPrice: 399, discount: '限时钜惠',img:'https://oos-hazz.ctyunapi.cn/online-course/Webpack%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8-1699959221103099904.jpg'},
            { id: 4, name: '宇哥带你学Java之SpringCloud全家桶', price: 7999, originalPrice: 7999, discount: '原价',img:'https://oos-hazz.ctyunapi.cn/online-course/SpringCloud-1699063564498632704.jpg'},
            { id: 5, name: '宇哥带你学Java之Java基础', price: 4999, originalPrice: 4999, discount: '原价',img:'https://oos-hazz.ctyunapi.cn/online-course/java-1646815099383447552.png'}
          ],
          selected: [],
          selectAll: false
        };
      },
      computed: {
        totalPrice() {
          return this.selected.reduce((sum, item) => sum + item.price, 0);
        }
      },
      methods: {
        removeItem(item) {
          
            /* 从list数组中删除item */
            this.list = this.list.filter(i => i.id !== item.id);
        },
        toggleAll() {
          this.selected = this.selectAll ? [...this.list] : [];
        },
        submitOrder() {
          if (this.selected.length === 0) {
            alert('请先选择课程');
            return;
          }
          alert(`已提交订单，共 ${this.selected.length} 门课程，总价 ￥${this.totalPrice.toFixed(2)}`);
        }
      },
      watch: {
        selected(newVal) {
          this.selectAll = newVal.length === this.list.length;
        }
      }
}
</script>
<style lang="scss" scoped>
    body {
      font-family: "Microsoft YaHei", sans-serif;
      margin: 20px;
    }
    #app{
        width: 1160px;
        margin: 0 auto;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
     
    }
    tr{
      border: 1px solid #e3dede;
    }
    th{
      font-size: 12px;
      color: #666;
      font-weight: 200;
    }
    th, td {
      
      padding: 10px;
      text-align: center;
      /* 内边框消失，外边框保留 */
      border: none;
    }
    .course-name {
      text-align: left;
      img{
        width: 126px;
        height: 100%;
        margin-left: 5px;
        margin-right: 20px;
      }
    }
    .price {
      color: #e60012;
      
    }
    .original-price {
      color: #999;
      text-decoration: line-through;
      margin-left: 5px;
    }
    .select-all {
      /* 靠左展示 */

    }
    .submit-btn {
      
      padding: 10px 20px;
      background-color: #3d3afd;
      color: white;
      border: none;
      cursor: pointer;
    }
    .submit-btn:disabled {
      background-color: #aaa;
      cursor: not-allowed;
    }
    .total-price{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        strong{
            margin-right: 10px;
        }
    }
  </style>